import {
    ProForm,
    ProFormGroup,
    ProFormItem,
    ProFormSwitch,
    ProFormText,
    ProFormTextArea
} from '@ant-design/pro-components';
import { Button } from 'antd';
import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
import styled from 'styled-components';

import { CLASS_CLASS_IDENTIFIER } from '@/services/constants';
import { dsInsert, dsUpdateById } from '@/services/local';
import { QiniuFileUpload } from '../../../components';
import { MetaDataObject } from '../../../services';
import { getNowFormatDate, uuid } from '../../../utils';

export interface ObjectEditorProps {
    style?: CSSProperties;
    domainIdentifier: string;
    item?: MetaDataObject;
    onFinish: () => Promise<void> | void;
}

export const ObjectEditor: React.FC<ObjectEditorProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [icon, setIcon] = useState<Array<string>>([]);

    const requestCallback = useCallback(async () => {
        console.log('---------', props.item);
        if (!props.item) return {};
        if (props.item.icon && props.item.icon.length > 0) {
            setIcon([props.item.icon]);
        }
        return props.item;
    }, [props.item]);

    useEffect(() => { }, [props.item])

    return (
        <Container>
            <ProForm<MetaDataObject>
                initialValues={props.item}
                request={requestCallback}
                onFinish={async (values) => {
                    //TODO 校验
                    values.icon = icon && icon.length > 0 ? icon[0] : '';
                    values = {
                        domain_identifier: props.domainIdentifier,
                        ...props.item,
                        ...values,
                    };
                    if (props.item) {
                        //编辑
                        await dsUpdateById(0, CLASS_CLASS_IDENTIFIER, props.item.id, values);
                        // let _ = await metaDataUpdateObject(values);
                    } else {
                        //添加
                        values.identifier = uuid();
                        let _ = await dsInsert(0, CLASS_CLASS_IDENTIFIER, values);
                        // let _ = await metaDataSaveObject(values);
                    }
                    await props.onFinish();
                }}
                submitter={false}
            >
                <ProFormGroup>
                    <ProFormText
                        rules={[{ required: true }]}
                        fieldProps={{}}
                        name="name"
                        label="名称" />
                    <ProFormText
                        rules={[{ required: true }]}
                        fieldProps={{}}
                        name="title"
                        label="标题" />
                </ProFormGroup>

                <ProFormItem
                    extra="只能上传jpg/png文件,且不大于1MB"
                    label="图标"
                    name="icon">
                    <QiniuFileUpload
                        title={'上传图标'}
                        listType={'picture-card'}
                        accept={"image/png, image/jpeg"}
                        max={1}
                        values={icon}
                        isPicture={true}
                        filePath={`g01/domains/images/${getNowFormatDate('')}`}
                        onChange={async (files) => {
                            setIcon(files);
                        }}></QiniuFileUpload>
                </ProFormItem>
                <ProFormGroup>
                    <ProFormSwitch
                        fieldProps={{}}
                        name="data_is_type"
                        label="数据是否是类型" />
                    <ProFormSwitch
                        fieldProps={{}}
                        name="persistent"
                        label="是否是持久化类" />
                </ProFormGroup>
                <ProFormText
                    rules={[{ required: true }]}
                    width="xl" fieldProps={{}}
                    name="primary_key"
                    label="主键" />
                <ProFormTextArea
                    width="xl"
                    fieldProps={{}}
                    name="options"
                    label="选项" />
                <ProFormTextArea
                    width="xl"
                    fieldProps={{}}
                    name="description"
                    label="描述" />
                <ProFormItem>
                    <Button loading={loading} type="primary" htmlType="submit">
                        添加
                    </Button>
                </ProFormItem>
            </ProForm>
        </Container>
    );
}


const Container = styled.div`
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
`;